<template>
  <div class="upload-lb">
    <a-upload
      class="avatar-uploader"
      ref="upload"
      :action="uploadUrl"
      accept="image/*"
      :data="{dir: dir}"
      :showUploadList="false"
      @change="handleSuccess"
    >
      <img
        v-if="posterUrl"
        style="width: 120px;height: 120px"
        :src="posterUrl"
        alt="avatar"/>
      <div v-else>
        <a-icon class="upload-icon" :type="loading ? 'loading' : 'plus'"/>
        <div class="upload-text">
          上传
        </div>
      </div>
    </a-upload>
    <div class="upload-tips">{{ tips }}</div>
  </div>
</template>

<script>
    export default {
        name: 'UploadLb',
        props: {
            posterUrl: {
                type: String,
                default: null
            },
            tips: {
                type: String,
                default: '*大小不超过800KB'
            }
        },
        data () {
            return {
                uploadUrl: 'api/file/upload',
                // 上传子目录
                dir: 'user/qw/poster',
                loading: false
            }
        },
        methods: {
            handleSuccess (info) {
                if (info.file.status === 'uploading' || !info.file.response) {
                    this.loading = true
                    return
                }
                try {
                    this.loading = false
                    this.$emit('input', info.file.response.data.url)
                } catch (e) {
                    this.$message.error(`上传失败`)
                }
            }
        }
    }
</script>

<style lang="less">
.upload-lb{
    min-width: 84px;
    min-height: 84px;
.avatar-uploader {
    width: 150px;
}

.avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .3s ease;
}

.upload-icon {
    font-size: 32px;
    color: #999;
}

.upload-text {
    margin-top: 8px;
    color: #666;
}
    .upload-tips{
        color: #de1f26;
        text-align: left;
        margin-top: 10px;
    }
}
</style>
